import React, { FC, ReactElement } from 'react'
import ClassNames from 'classnames'

// 枚举
// export enum BtyType {
//     Primary = 'primary',
//     Default = 'default'
// }
// 类型别名
type BtyType = "primary" | "default" | "danger" | "link"
// 按钮的大小
type BtnSize = "lg" | "sm"
type BtnChild = ReactElement | string

interface BtnProps {
    btnType?: BtyType,
    btnSize?: BtnSize,
    disabled?: boolean,
    children?: BtnChild,
    // onClick?: () => {}
}

// FC<约束props类型> 

// btnType
// size
// disabled
const Button: FC<BtnProps> = (props) => {
    const { btnType, btnSize, disabled, children } = props
    console.log(props)
    // btn-primary
    // btn-default
    let classess = ClassNames('btn', {
        [`btn-${btnType}`]: btnType,
        [`btn-${btnSize}`]: btnSize,
        disabled: disabled
    })
    return <button className = { classess }>
        { children }
    </button>
}

export default Button